<template>
  <div class="header-container">
    <div class="header-return" v-show="returnDisplay" @click="back()">
      <span class="circle-border"></span>
      <span class="return">
        <i class="iconfont icon-fanhui"></i>
      </span>
    </div>
    <div class="header-top" :style="styleOpacity">
      <div class="left" @click="back()">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="title">上海迪士尼乐园</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      returnDisplay: true,
      styleOpacity: { opacity: 0 }
    };
  },
  watch: {},
  computed: {},
  methods: {
    back() {
      this.$router.push("./");
    }
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", () => {
      let top = document.documentElement.scrollTop;
      // console.log(top);
      if (top > 5) {
        let opacity = top / 80;
        opacity = opacity > 1 ? 1 : opacity;
        this.returnDisplay = false;
        this.styleOpacity = { opacity };
      } else {
        this.returnDisplay = true;
        this.styleOpacity = { opacity: 0 };
      }
    });
  }
};
</script>
<style lang="stylus" scoped>
@import '~css/var.styl'

.circle-border
  position absolute
  background #000
  opacity 0.5
  width 0.6rem
  height 0.6rem
  border-radius 0.3rem
  left 0.1rem
  top 0.15rem

.return
  position absolute
  color #ffffff
  font-size 0.32rem
  font-weight bolder
  left 0.21rem
  top 0.27rem

.header-top
  z-index 99
  position fixed
  background $bgColor
  color $textColor
  font-size 0.28em
  width 100%
  height 0.88rem
  line-height 0.6rem

  .left
    position absolute
    left 0
    top 0
    font-weight bolder
    font-size 0.36rem
    text-align left
    margin 0.11rem 0
    width 0.4rem
    padding 0 0.2rem

    .iconfont
      vertical-align middle

  .title
    text-align center
    line-height 0.88rem
</style>